<!-- 报名管理 -->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destory-on-close="true"
    :modal-append-to-body="false"
    :title="title"
    :visible.sync="dialogFormVisible"
    width="65%"
    @close="close"
  >
    <vab-query-form>
      <vab-query-form-left-panel :span="18">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item label="审核状态">
            <el-select
              v-model="form.value"
              clearable
              placeholder="请选择审核状态"
            >
              <el-option
                v-for="item in options1"
                :key="item.id"
                :label="item.creClasName"
                :value="item.id"
                @click.native="optosall(item)"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属角色" prop="classifyId">
            <el-select
              v-model="queryForm.classifyId"
              clearable
              placeholder="请选择所属角色"
            >
              <el-option
                v-for="item in options2"
                :key="item.id"
                :label="item.classifyName"
                :value="item.id"
                @click.native="chooseone(item)"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属领队" prop="leaderId">
            <el-select
              v-model="queryForm.leaderId"
              clearable
              placeholder="请选择所属领队"
            >
              <el-option
                v-for="item in options3"
                :key="item.id"
                :label="item.leaNickName"
                :value="item.id"
                @click.native="choose(item)"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleDownload">
              导出全部 Excel
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleDownloadtwo">
              导出选中行
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="6">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model.trim="queryForm.keyWord"
              clearable
              placeholder="请输入用户名"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      border
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" show-overflow-tooltip type="selection" />
      <!-- <el-table-column align="center" label="序号" width="55">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column> -->
      <!-- <el-table-column align="center" label="数字id" show-overflow-tooltip>
        <template #default="{ row }">
          {{ row.digitalId }}
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="演员姓名" show-overflow-tooltip>
        <template #default="{ row }">
          {{ row.actorName }}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="报名角色名称"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          {{ row.classifyName }}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="联系人手机号"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          {{ row.linkphone }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="领队名称" show-overflow-tooltip>
        <template #default="{ row }">
          {{ row.leaderName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核状态" show-overflow-tooltip>
        <template slot-scope="scope">
          <template v-if="scope.row.ischecked == 0">
            <span style="color: red">未审核</span>
          </template>

          <template v-else-if="scope.row.ischecked == 1">
            <span style="color: green">审核通过</span>
          </template>
          <template v-else-if="scope.row.ischecked == 2">
            <span style="color: red">审核失败</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        show-overflow-tooltip
        width="130"
      >
        <template #default="{ row }">
          <el-button type="text" @click="handleEdittwo(row)">处理</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-image
          class="vab-data-empty"
          :src="require('@/assets/empty_images/data_empty.png')"
        />
      </template>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNum"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <Edittwo ref="Edittwo" @fetch-data="fetchData" />

    <!-- <el-button class="baocun" size="medium" type="primary" @click="save">
      保存
    </el-button> -->
  </el-dialog>

  <!-- 增加 -->
</template>

<script>
  /* eslint-disable*/
  import { getbaoList, leader, jilu } from '@/api/userManagement'
  import { roleId } from '@/api/yanyuan' //引入角色内容
  import Edittwo from './baomingchuli.vue'

  //import { number } from 'echarts'
  export default {
    name: 'search',
    components: { Edittwo },

    data() {
      const validatesurfacePlot = (rule, value, callback) => {
        console.log(this.form.surfacePlot)
        if (this.form.surfacePlot === '') {
          callback(new Error('请添加图片!!!!'))
        } else {
          callback()
        }
      }
      return {
        listLoading: true,
        options1: [
          {
            id: 0,
            creClasName: '未审核',
          },
          {
            id: 1,
            creClasName: '审核通过',
          },
          {
            id: 2,
            creClasName: '审核未通过',
          },
        ],
        layout: 'total, sizes, prev, pager, next, jumper',
        downloadLoading: false,
        total: 0,
        multipleSelection: [],
        options2: [],
        queryForm: {
          pageNum: 1,
          pageSize: 10,
          jobId: '', //赋值当前项的id
          leaderId: '', //所属领队id
          ischecked: '', //	否	0-未审核 1-审核通过 2-审核未通过
          leaderCheck: '',
          keyWord: '', //关键字
          classifyId: '', //所属角色
        },
        list: [],
        token: '',
        imageUrl: '',
        options3: [],
        form: {
          value: '',
          roleId: '',

          // areaId: '',
          // articleContent: '',
          // sort: 0,
          // roles: [],
          // displayLocked: true,
          // recommendLocked: true,
          // share: true, //是否分享
          // locked: false,
          // surfacePlot: '', //图片
        },
        activated() {
          if (this.$refs.MaskVideo.src) this.$refs.MaskVideo.play()
        },
        deactivated() {
          if (this.$refs.MaskVideo.src) this.$refs.MaskVideo.pause()
        },

        rules: {
          title: [
            { required: true, trigger: 'blur', message: '请输入文章名称' },
          ],
          surfacePlot: [
            { required: true, trigger: 'change', message: '请添加图片' },
            { validator: validatesurfacePlot, trigger: 'change' },
          ],
          userId: [
            { required: true, trigger: 'blur', message: '请选择所属用户' },
          ],
          sort: [{ required: true, trigger: 'blur', message: '排序不能为空' }],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {
      this.token = this.$store.getters['user/token']
      this.fetchDatatwo()
    },
    methods: {
      async handleDownload() {
        const res = await jilu({
          exportData: '报名管理列表',
        })
        this.downloadLoading = true
        import('@/utils/excel').then((excel) => {
          const tHeader = [
            '职位标题',
            '职位内容',
            '联系人',
            '联系人手机号',

            '演员姓名',
            '身份证号码',
            '报名角色名称',
            // '涉及车辆',
            '领队名称',
          ]
          const filterVal = [
            'jobHead',
            'jobInfo',
            'linkmans',
            'linkphone',

            'actorName',
            'idCardNum',
            'classifyName',
            // 'aboutCar',
            'leaderName',

            // this.form.jobHead,
          ]
          const list = this.list
          const data = this.formatJson(filterVal, list)
          console.log(data)

          excel.export_json_to_excel({
            header: tHeader,
            data,
            keyWord: this.queryForm.keyWord, //关键字
            leaderId: this.queryForm.leaderId, //领队
            value: this.form.value, //审核状态
            classifyId: this.queryForm.classifyId, //所属角色
          })
          this.downloadLoading = false
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map((v) =>
          filterVal.map((j) => {
            return v[j]
          })
        )
      },
      async handleDownloadtwo() {
        if (this.multipleSelection.length) {
          const res = await jilu({
            exportData: '报名管理列表',
          })
          this.downloadLoading = true
          import('@/utils/excel').then((excel) => {
            const tHeader = [
              '职位标题',
              '职位内容',
              '联系人',
              '联系人手机号',

              '演员姓名',
              '身份证号码',

              '报名角色名称',
              '领队名称',
            ]
            const filterVal = [
              'jobHead',
              'jobInfo',
              'linkmans',
              'linkphone',

              'actorName',
              'idCardNum',

              'classifyName',
              'leaderName',
            ]
            const list = this.multipleSelection
            const data = this.formatJsontwo(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              keyWord: this.queryForm.keyWord, //关键字
              leaderId: this.queryForm.leaderId, //领队
              value: this.form.value, //审核状态
              classifyId: this.queryForm.classifyId, //所属角色
            })
            this.$refs.multipleTable.clearSelection()
            this.downloadLoading = false
          })
        } else {
          this.$baseMessage('请至少选择一行', 'error', 'vab-hey-message-error')
        }
      },
      formatJsontwo(filterVal, jsonData) {
        return jsonData.map((v) => filterVal.map((j) => v[j]))
      },
      handleEdittwo(row) {
        if (row.id) {
          this.$refs['Edittwo'].showEdit(row)
        } else {
          this.$refs['Edittwo'].showEdit()
        }
      },
      async chooseone(e) {
        this.listLoading = true
        this.queryForm.pageNum = 1
        const res = await getbaoList(this.queryForm)
        this.list = res.data.dataList
        this.total = res.data.total
        this.listLoading = false
      },
      async optosall(e) {
        this.queryForm.ischecked = this.form.value
        this.listLoading = true
        this.queryForm.pageNum = 1
        const res = await getbaoList(this.queryForm)
        this.list = res.data.dataList
        this.total = res.data.total
        this.listLoading = false
      },
      async choose(e) {
        this.listLoading = true
        this.queryForm.pageNum = 1
        const res = await getbaoList(this.queryForm)
        this.list = res.data.dataList
        this.total = res.data.total
        this.listLoading = false
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.showEdit()
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.showEdit()
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      // handleChange(a) {
      //   this.form.articleContent = a
      // },
      handleAvatarSuccess(res, file, fileList) {
        this.imageUrl = URL.createObjectURL(file.raw)

        this.form.surfacePlot = res.data
      },

      async queryData() {
        this.listLoading = true
        this.queryForm.pageNum = 1
        const res = await getbaoList(this.queryForm)
        this.list = res.data.dataList
        this.total = res.data.total
        this.listLoading = false
      },
      async showEdit(row) {
        console.log(row)
        this.form = row
        this.listLoading = true
        this.queryForm.jobId = row.id
        this.title = '报名管理列表'
        this.dialogFormVisible = true
        const res = await getbaoList(this.queryForm)
        this.list = res.data.dataList
        this.total = res.data.total
        this.fetchData()
        this.listLoading = false
      },
      close() {
        let userId = this.form.userId
        // this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        if (!this.form.id) {
          this.form.userId = userId
        }
        this.dialogFormVisible = false
        this.imageUrl = ''
        // this.form = ''
      },
      async fetchDatatwo() {
        let queryForm = {}
        const res = await roleId(queryForm)
        this.options2 = res.data
        console.log(res)
      },
      async fetchData() {
        const restwo = await leader({
          jobId: this.queryForm.jobId,
        })
        this.options3 = restwo.data
      },
      nickNameChange() {
        this.$forceUpdate()
      },
    },
  }
</script>
<style>
  .avatar-uploader .el-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    width: 178px;
    height: 178px;
    font-size: 28px;
    line-height: 178px;
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
    width: 178px;
    height: 178px;
  }
  .baocun {
    width: 100%;
    height: 100%;
  }
</style>
